<template>
    <l-layout class="l-tab-page" v-show="!lr_loadPage" >
        <l-panel>
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input :placeholder="$t('请输入关键字查询')" v-model="searchWord"  @keyup.enter.native="hanleSearch" size="mini" >
                        <el-button slot="append" icon="el-icon-search" @click="hanleSearch" ></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" :refreshClick="refreshClick" >
                    <l-excel-btns></l-excel-btns>
                </l-tool-btns>
            </template>
            <l-table 
                :loading="tableLoading"
                :columns="lr_getPageColumns(columns)"
                :dataSource="tableData"
                row-key="f_DatabaseLinkId"
                >
                <l-table-btns :filterBtns="filterBtns" :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>

        <l-dialog 
            :title="formTitle"
            :visible.sync="formVisible"
            @ok="handleSave"
            @close="handleCloseForm"
            @opened="handleOpenedForm"
            >
            <my-form ref="form" ></my-form>       
        </l-dialog>
    </l-layout>
</template>

<script>
const api = window.$api.data.dblink
import MyForm from './form'

export default {
    components: {
        MyForm
    },
    data() {
        return {
            lr_isPage:true,
            // 表格
            columns: [
                {label:'名称',prop:'f_DBAlias',minWidth:'150'},
                {label:'编码',prop:'f_DBName',minWidth:'150'},
                {label:'类型',prop:'f_DbType',width:'80',align:'center'},
                {label:'数据库地址',prop:'f_ServerAddress',width:'200'}
            ],
            tableBtns:[
                {prop:'Edit',label:'编辑'},
                {prop:'Delete',label:'删除'}
            ],
            tableLoading:false,
            searchWord:'',
            searchTableData:null,

            formVisible:false,
            formTitle:'',
            formEditRow:null,
            formEdit:false
        };
    },
    mounted () {
        this.init()
    },
    computed:{
        tableData(){
            return this.searchTableData || this.lr_dblinkList
        },
    },
    methods:{
        refreshClick(){
            this.searchWord = ''
            this.init()
        },

        async init(){
            this.tableLoading = true
            await this.lr_loadDblink(false)
            this.tableLoading = false
        },

        hanleSearch(){
            if(this.searchWord){
                this.searchTableData = this.lr_dblinkList.filter(item => item.f_DBAlias.indexOf(this.searchWord) >-1 || item.f_DBName.indexOf(this.searchWord)>-1 || (item.f_ServerAddress && item.f_ServerAddress.indexOf(this.searchWord)>-1));
            }
            else{
                this.searchTableData = null;
            }
        },

        // 表单部分
        handleAdd(){
            this.formEdit = false
            this.showForm('新增数据库连接')
        },
        handleEdit($index,row){
            this.formEdit = true
            this.formEditRow = row
            this.showForm('编辑数据库连接')
        },
        handleDelete($index,row){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                api.remove(row.f_DatabaseLinkId).then(()=> {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.init()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })        
            })
        },
        handleSave(showLoading,hideLoading){
            showLoading()
            this.$refs.form.validateForm((valid)=>{
                if(valid){
                    const formData = this.$refs.form.getForm()
                    if(this.formEdit){// 修改数据
                        api.update(formData.f_DatabaseLinkId,this.$deepClone(formData)).then(()=> {
                            hideLoading()
                            this.formVisible = false
                            this.$message({
                                type: 'success',
                                message: '更新成功!'
                            })
                            this.init()
                        }).catch(() => {
                            hideLoading()
                        })
                    }
                    else{// 新增数据
                        api.add(this.$deepClone(formData)).then(()=> {
                            hideLoading()
                            this.formVisible = false
                            this.$message({
                                type: 'success',
                                message: '添加成功!'
                            })
                            this.init()
                        }).catch(() => {
                            hideLoading()
                        })
                    }
                }
                else{
                    hideLoading()
                }
            })
        },
        handleOpenedForm(){
            if(this.formEdit){
                this.$refs.form.setForm(this.formEditRow)
            }
        },
        handleCloseForm(){
            this.$refs.form.resetForm()
        },
        showForm(text){
            this.formTitle = text
            this.formVisible = true
        },

        filterBtns(row,btns){
            if(row.f_DBName != 'saas'){
                return btns
            }
            else{
                return []
            }
        }
    }
}
</script>